<template>
    <div class="FeeOpen">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="onClickLeft"></i>
            <span>意见建议</span>
            <i class="iconfont iconzuojiantou" style="color: white;"></i>
        </div>
        <div class="content">
            <div class="center-Text">
                <textarea autofocus rows="0" cols="value" placeholder="请输入您的建议" maxlength="500" v-model="textName">{{textName}}</textarea>
                <span>{{figure}}/500</span>
            </div>
            <div class="center-img">
                <div class="camera-Box" style="margin-right:0.15rem">
                    <img src="../assets/Mymi/camera.png" class="input-img" ref="goodsImg">
                    <input type="file" class="upFile" capture='camera'  @change="ImgClick($event)" ref="inputer" multiple accept="image/png,image/jpeg,image/gif,image/jpg"/>
                </div>
                <div class="camera-Box" style="margin-right:0.15rem" v-show="qrCodes1">
                    <img src="../assets/Mymi/camera.png" class="input-img" ref="goodsImg1">
                    <input type="file" class="upFile" capture='camera' @change="ImgClick1($event)" ref="inputer" multiple accept="image/png,image/jpeg,image/gif,image/jpg"/>
                </div>
                <div class="camera-Box"  v-show="qrCodes2">
                    <img src="../assets/Mymi/camera.png" class="input-img" ref="goodsImg2" >
                    <input type="file" class="upFile" capture='camera' @change="ImgClick2($event)" ref="inputer" multiple accept="image/png,image/jpeg,image/gif,image/jpg"/>
                </div>
                <span class="span-text">最多上传3张</span>
            </div>
        </div>
        <div class="buttom">
            <button @click="referred">{{buttonReferred}}</button>
        </div>
    </div>
</template>

<script>
import { Toast , Uploader } from "vant";
export default {
    name:'notopen',
    data (){
         return {
            textName:"",
            formData:new FormData(),
            imgs: {},
            imgLen:0,
            fileList: [],
            img:[],
            pictureOne:"",
            pictureTwo:"",
            pictureThree:"",
            buttonReferred:"提交",
            qrCode:"",
            qrCodes1:false,
            qrCodes2:false,
            imgPic:require('../assets/Mymi/camera.png')

        }
    },
  
    computed:{
        figure(){
            return this.textName.length;
        }
    },
    watch:{
        'fileList':function(file){
            // alert(JSON.stringify(file)[0].content)
            // alert(file.length)
            
            if(file.length==1){
                 let content = file[0].content;
                //  alert(content)
                this.$axios.post('/cct/qny/baseImages',{
                    base:content
                }).then(res =>{
                    // alert('长度为1',JSON.stringify(res))
                    if(res.data.code==0){
                        this.pictureOne=res.data.data;
                    }
                }).catch(err=>{
                    // alert('错误',err)
                })
            }else if(file.length==2){
                   let content = file[1].content;
                //    alert(content)
                this.$axios.post('/cct/qny/baseImages',{
                    base:content
                }).then(res =>{
                //    alert('长度为2',JSON.stringify(res))
                    if(res.data.code==0){
                        this.pictureTwo=res.data.data;
                    }
                })
            }else if(file.length==3){
                  let content = file[2].content;
                this.$axios.post('/cct/qny/baseImages',{
                    base:content
                }).then(res =>{
                    // alert(res)
                    if(res.data.code==0){
                        this.pictureThree=res.data.data;
                    }
                })
            }
        } 
    },
    methods:{
        ImgClick(e) {
			var that = this;
			var fil = e.target.files[0];
			this.base(fil, function(base64Data, fileName) {
				that.qrCode = base64Data;
				that.imgFile = that.dataURLtoFile(base64Data, fileName);
                console.log('哈哈哈',that.imgFile);
                console.log(base64Data)
                that.$refs.goodsImg.src=base64Data;
                
                that.$axios.post('/cct/qny/baseImages',{
                    base:base64Data
                }).then(res =>{
                    // alert('长度为1',JSON.stringify(res))
                    if(res.data.code==0){
                        that.qrCodes1=true
                        that.pictureOne=res.data.data;
                    }
                }).catch(err=>{
                    // alert('错误',err)
                })
			});
        },
         ImgClick1(e) {
			var that = this;
			var fil = e.target.files[0];
			this.base(fil, function(base64Data, fileName) {
				that.qrCode1 = base64Data;
				that.imgFile = that.dataURLtoFile(base64Data, fileName);
                console.log('哈哈哈',that.imgFile);
                console.log(base64Data)
                that.$refs.goodsImg1.src=base64Data;
                that.$axios.post('/cct/qny/baseImages',{
                    base:base64Data
                }).then(res =>{
                    // alert('长度为1',JSON.stringify(res))
                    if(res.data.code==0){
                         that.qrCodes2=true
                        that.pictureTwo=res.data.data;
                    }
                }).catch(err=>{
                    // alert('错误',err)
                })
			});
        },
         ImgClick2(e) {
			var that = this;
			var fil = e.target.files[0];
			this.base(fil, function(base64Data, fileName) {
				that.qrCode2 = base64Data;
				that.imgFile = that.dataURLtoFile(base64Data, fileName);
                console.log('哈哈哈',that.imgFile);
                console.log(base64Data)
                that.$refs.goodsImg2.src=base64Data;
                that.$axios.post('/cct/qny/baseImages',{
                    base:base64Data
                }).then(res =>{
                    // alert('长度为1',JSON.stringify(res))
                    if(res.data.code==0){
                        that.pictureThree=res.data.data;
                    }
                }).catch(err=>{
                    // alert('错误',err)
                })
			});
        },
        onClickLeft (){
            this.$router.go(-1);
        },
      //  上传图片
        addImg(event){
	        let inputDOM = this.$refs.inputer;
	        // 通过DOM取文件数据
	        this.fil = inputDOM.files;
	        let oldLen=this.imgLen;
	        let len=this.fil.length+oldLen;
	        if(len>3){
            //   Toast("请选择5M以内的图片！");
	         //  alert('最多可上传3张，您还可以上传'+(3-oldLen)+'张');
	          return false;
	        }
	        for (let i=0; i < this.fil.length; i++) {
                let size = Math.floor(this.fil[i].size / 1024);
                if (size > 5*1024*1024) {
                    Toast("请选择5M以内的图片！");
                    // alert('请选择5M以内的图片！');
                    return false
                }
                this.imgLen++;
                this.$set(this.imgs,this.fil[i].name+'?'+new Date().getTime()+i,this.fil[i]);
            }
			this.submit();
        },

        getObjectURL(file) {
	        var url = null ;
	        if (window.createObjectURL!=undefined) { // basic
	            url = window.createObjectURL(file) ;
	        } else if (window.URL!=undefined) { // mozilla(firefox)
	            url = window.URL.createObjectURL(file) ;
	        } else if (window.webkitURL!=undefined) { // webkit or chrome
	            url = window.webkitURL.createObjectURL(file) ;
            }
	        return url ;
        },
        submit(){
	        for(let key in this.imgs){
	           let name=key.split('?')[0];
	           this.formData.append('multipartFiles',this.imgs[key],name);
            }
            this.$axios.post('/cct/qny/uploading', this.formData,
            ).then(res => {
                console.log("上传图片",res)
	             this.img.push(res.data.url);
	        });
         }, 
         referred(){
            if(this.textName == ""){
               Toast("请输入反馈意见");
               return false;
            }
             this.POSTsuggest();
         },
        //  提交建议
         POSTsuggest(){
               this.$axios.post("/cct/suggest/add",{
                suggest:this.textName,
                pictureOne: this.pictureOne,
                pictureTwo: this.pictureTwo,
                pictureThree: this.pictureThree,
            }).then(res =>{
                console.log('提交建议',res)
                Toast(res.data.msg)
                this.textName = "";
                this.fileList = []
                let success = res.data.msg == "操作成功" ? "提交成功" : "提交失败"
                this.buttonReferred = success
                this.$refs.goodsImg.src=this.imgPic;
                this.$refs.goodsImg1.src=this.imgPic;
                this.$refs.goodsImg2.src=this.imgPic;
            })
           
         }
    }
  }
</script>

<style lang="less" scoped>
.FeeOpen{
    font-size: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    .title{
        width: 100%;
        font-size: 0.36rem;
        color:#333;
        height: 1.25rem;
        line-height: 1.25rem;
        background-color: #fff;
        margin-bottom: 0.44rem;
        display: flex;
        justify-content: space-between;
        font-family: "PingFang-SC-Medium";
        padding: 0 0.2rem;
        box-sizing: border-box;
    }
    .content{
        width: 100%;
        height: 5.14rem;
        padding: 0.26rem;
        background: #fff;
        .center-Text{
            width: 6.9rem;
            height: 2.2rem;
            margin: 0rem auto;
           
            position: relative;
            textarea{
                color: #333;
                font-size: 0.26rem;
                width: 100%;
                height: 2.2rem;
                border: 1px solid rgb(206, 206, 206);
                border-radius:0.1rem;
                resize: none;
                 padding:0.2rem;
                box-sizing:border-box;
            }
            span{
               position: absolute;
               top:1.76rem;
               left:5.96rem;
               font-size: 0.22rem;
               color: #C3C3C3;
            }
        }
        .center-img{
            width: 100%;
            height: 1rem;
            // background: red;
            margin-top: 0.44rem;
            display: flex;
            .img{
                width: 1rem;
                height: 1rem;
                margin-right: 0.2rem;
                img{
                    width: 1rem;
                    height: 1rem;
                    
                }
            }
            .camera-Box{
                position: relative;
                border: 0.01rem solid rgb(206, 206, 206);
                border-style:dashed;
                .input-img{
                    width: 1rem;
                    height: 1rem;
                }
                .upFile{
                    width: 1rem;
                    height: 1rem;
                    opacity: 0;
                    position: absolute;
                    top: 0rem;
                    left: 0rem;
                }
            }
            .span-text{
                line-height: 1rem;
                font-size: 0.22rem;
                color: #C3C3C3;
                margin-left: 0.15rem;
            }
        }
    }
    .buttom{
        width: 100%;
        height: 0.92rem;
        // background: red;
        margin-top: 2.82rem;
        button{
            font-size: 0.32rem;
            width: 6.9rem;
            height: 0.92rem;
            border-radius: 0.5rem;
            margin-left: 0.3rem;
            background: #38A83F;
            color: white;
        }
    }
    .uploaderImg{
        width: 100%;
        height: 100%;
    }
}
</style>
